<%@ page language="java" pageEncoding="UTF-8"%><%@ include
	file="/WEB-INF/commons/taglibs.jsp"%>
<!-- 如果session中用户名为空，跳转到登录页面 -->
<%@ page import="com.google.appengine.api.users.User"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>
<%
	UserService userService = UserServiceFactory.getUserService();
	User user = userService.getCurrentUser();
	if (user == null) {
		response.sendRedirect(userService.createLoginURL("/myFlows"));
	}
%>

<!-- Flow展示区 -->
<script type="text/javascript">
	$(function(){
		function showMsg($item,msgType,msg,timeout) {
			var classType='ui-state-highlight';
			if(msgType=='error') {
				classType='ui-state-error';
			}
			$item.addClass(classType);
			$item.html("<span class='ui-icon ui-icon-info'></span>" + msg);
			setTimeout(function(){$item.html('').removeClass(classType);
			}, timeout);
		}
		var $dialog=$('#entity-crt-dialog').dialog({
				autoOpen:false,
				width:300,
				height:112,
				modal:true,
				buttons:{
					提交:function() {
						var name=$('#entity-name').val().trim();
						if(name == ''){showMsg($('#message'),'error',title+'名称不能为空!',3000);return;	}
						
						var type=$('#entity-type').val().trim();
						var requestUrl='';
						var title='';
						if(type=='pack'){requestUrl='/myFlows/ajax/crtPack';title='电话分组';}
						else{requestUrl='/myFlows/ajax/addFrid';title='好友';}
						$.ajax({
							url:requestUrl,
							data:'name='+name,
							type:'POST',
							timeout:15000,
							error:function(){showMsg($('#message'),'error',title+'添加失败!',3000);},
							success:function(response) {
								if(response.search('ERROR') != -1) {
									var msg=response.substring(5);
									showMsg($('#message'),'error',title+'添加失败! '+msg,3000);
								} else {
									$dialog.dialog('close');
									showMsg($('#message'),'info',title+'添加成功!',3000);
									setTimeout(function(){window.location.href = '/myFlows';},1000);
								}
							}
						});
					},
					取消:function(){$(this).dialog('close');}
				},
				open:function(){$('#pack-name').focus();},
				close:function(){$('form')[0].reset();}
		});
		$('a[id="pack-crt"]').click(function(){
			$('#entity-type').val('pack');
			$dialog.dialog({title:'创建电话分组'});
			$dialog.dialog('open');
		});
		$('a[id="frid-add"]').click(function(){
			$('#entity-type').val('frid');
			$dialog.dialog({title:'添加好友'});
			$dialog.dialog('open');
		});
		$('a[class$="flow-crt"]').click(function(){
			var packId=$(this).attr("packId");
			window.location.href = "/flow/create?packId=" + packId;
		});
		$('a[class$="flow-delete"]').click(function(){
			var flowId=$(this).attr('flowId');
			$.ajax({
				url:'/myFlows/ajax/delFlow?id='+flowId,
				type:'GET',
				timeout:10000,
				error:function(){
					showMsg($('#message'),'error','电话删除失败!',3000);
				},
				success:function(response) {
					showMsg($('#message'),'info','电话删除成功!',3000);
					$('a[flowId='+flowId+']').parent().parent().remove();
				}
			});
		});
		$('a[class$="flow-share"]').click(function() {
			window.alert($(this).attr('flowId'));
		});
	});
</script>
<table>
	<tr>
		<td>
		<div id="left" class="top-border">
		<p class="title">电话</p>
		<div class="nav">
		<p class="headline">分组<a id="pack-crt" href="#">创建分组</a></p>
		<ul class="navidget">
			<c:forEach var="e" items="${it.packs}">
				<li>
				<p class="name"><a href="#" title="添加电话" packId="${e.id}"
					class="ui-icon ui-icon-plus flow-crt">添加电话</a><a
					href="<c:url value="/myFlows/${e.id}"/>">${e.name}</a></p>
				</li>
			</c:forEach>
		</ul>
		</div>
		<div class="content"><c:forEach var="e" items="${it.flows}">
			<div class="nodeData">
			<div class="nodeData_title">${e.name}&nbsp;<a href="#"
				title="删除" flowId="${e.id}"
				class="ui-icon ui-icon-trash flow-delete">删除</a>&nbsp;<a href="#"
				title="分享给好友" flowId="${e.id}"
				class="ui-icon ui-icon-signal-diag flow-share">分享给好友</a>&nbsp;</div>
			<div class="nodeData_content">${e.content}</div>
			<div class="nodeData_bottom"><fmt:formatDate
				value="${e.crtDate}" pattern="yyyy-MM-dd HH:mm:ss" /></div>
			</div>
		</c:forEach></div>
		</div>
		</td>
		<td>
		<div id="right" class="top-border">
		<p class="title">好友列表<a id="frid-add" href="#">添加好友</a></p>
		<ul class="navidget">
			<c:forEach var="e" items="${it.frids}">
				<li>
				<p class="name"><a href="<c:url value="/user/${e}"/>">${e}</a></p>
				</li>
			</c:forEach>
		</ul>
		</div>
		</td>
	</tr>
</table>
<div id="entity-crt-dialog" title="">
<form><input type="hidden" id="entity-type" name="entity-type" />名称&nbsp;&nbsp;<input
	id="entity-name" name="entity-name" type="text" class="medium-input"
	style="width: 225px;" /></form>
</div>
